
<template>
    <div>
        <h2>vue的基本语法</h2>
        <ol>
            <li>任何一个vue文件由三部分组成: template、style</li>
            <li> 第一:{{}}插值语法</li>
            <li> mun:{{mun}}插值语法</li>
            <li> {{arr}}</li>
        </ol>
        <input type="button" class=" btn btn-danger" value="修改" v-on:click="fn">
        <input type="button" class=" btn btn-danger" value="修改sguz" @click="fn1">
        <input type="button" class=" btn btn-danger" value="修改对象" @click="fn2">
        <p>{{obj }}</p>
        <p v-for="(item,index) in arr" :key="index">
            {{index}}---{{item}}
        </p>
        <p>name:{{obj.name }}</p>
        <p>age:{{obj.age }}</p>
        <ol>
            <li v-for="item in arrObj" :key="item.id">

                {{item.name}}--{{item.age}}--{{item.sex}}
            </li>
          
        </ol>
    </div>

</template>

<script setup lang="ts">
import{reactive, ref} from 'vue'
let mun =ref (101)
let arr=reactive([1,2,3,5,6])

let obj =reactive({
name:"张三",
age:20,
})
let arrObj =reactive([
    { id:1,name:'张三',age:18,sex: "男" },
    { id:2,name:'燕飞',age:20 ,sex: "女" },
    { id:3,name:'孔明',age:35,sex: "男" },
    { id:4,name:'貂蝉',age:17 ,sex: "女" },
    { id:5,name:'孔融',age:23 ,sex: "男" },
])



 const fn=()=>{

    mun.value++;
    console.log( mun.value);
 }

const fn1=()=>{

arr[3]=100

}

 const fn2=()=>{

    obj.name='李四'
 }
</script>

<style scoped>

</style>